.w {
    padding: 0 .41rem;
}

#login {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
    height: 1.37rem;
    background-color: #fff;
    display: flex;
    align-items: center;

    img {
        width: 2.33rem;
        height: .6rem;
        display: block;
        margin-left: .3rem;
    }
}

/deep/ .login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-size: cover;
    padding: 0 2.86rem;

    section {
        height: 100%;
        flex: 0 0 50%;
    }

    .login-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p {
            text-align: center;
            float: right;
            margin: 0;

            &:nth-of-type(1) {
                color: #e6e5e5;
                max-width: 6.94rem;
                white-space: pre-wrap;
                font-size: .62rem;
            }

            &:nth-of-type(2) {
                color: #fff;
                font-size: .4rem;
                font-weight: 300;
            }
        }
    }

    .login-account {
        display: flex;
        align-items: center;
        justify-content: center;

        .login-account-wrap {
            width: 4.8rem;
            background-color: #fff;
            padding: 26px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            h2 {
                font-size: .28rem;
                width: 100%;
                text-align: left;
            }

            .horizontal-line {
                width: 100%;
                height: 1px;
                background: rgba(0, 0, 0, 0.09);
                margin-top: .20rem;
                margin-bottom: .30rem;
            }

            .el-form {
                width: 100%;


                .el-form-item {
                    margin-bottom: .22rem;
                    margin-right: 0 !important;

                    .el-input__inner {
                        width: 100%;
                        height: .58rem !important;
                        border-radius: 2px;
                        padding-left: .7rem;
                        letter-spacing: .1em;
                        font-size: .16rem;
                    }

                    .el-input__prefix {
                        display: flex;
                        align-items: center;
                        left: .2rem;

                        i {
                            font-size: .3rem;
                        }
                    }

                    &.code-wrap {
                        .el-form-item__content {
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            input {
                                padding-left: 20px;
                            }
                        }

                        .code-img {
                            width: 1.32rem;
                            height: .58rem;
                        }
                    }

                    &.err-wrap {
                        height: auto;
                    }
                }
            }

            input[type=submit] {
                width: 100%;
                height: .58rem;
                border-radius: 2px;
                font-size: .27rem;
                color: #fff;
                letter-spacing: .5em;

                &:focus {
                    outline: none;
                }
            }

        }
    }

    .err-wrap {
        width: 100%;
        height: .42rem;

        .el-form-item__content {
            height: .42rem !important;
            line-height: .42rem;
        }

        .err-content {
            background: #fff1f0;
            border-radius: 2px;
            border: 1px solid #FFA39E;
            padding: 0 .15rem;

            i {
                color: red;
            }

            span {
                margin-left: .1rem;
                color: #8f8f8f;
                font-size: .16rem;
            }
        }
    }

    .password-handle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-checkbox {
            display: flex;
            align-items: center;

            .el-checkbox__input {
                .el-checkbox__inner {
                    width: .24rem !important;
                    height: .24rem;

                    &::after {
                        top: .04rem;
                        left: .08rem;
                        height: .09rem;
                    }
                }
            }

            .el-checkbox__label {
                font-size: .18rem;
                line-height: .18rem;
                color: #787878;
            }
        }
    }
}

footer {
    height: 2.16rem;
    background-color: #fff;
    text-align: center;
    padding-top: .22rem;
    font-size: .17rem;
    color: rgba(0, 0, 0, 0.7);
}
